<template>
	<view class="image-box  ">
		<scroll-view class="image-list" :scrollX="true">
			<view class="image-one" :class="imageclass" @click="toDetail()" v-for="(item,index) in imageList"
				:key="index">
				<image class=" " :lazyLoad="true" mode="aspectFill" :src="item.url"></image>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props: {
			imageList: Array,
			type: {
				type: String,
				default: "normal"
			}
		},
		data() {
			return {
				temp: [1, 2, 3, 4, 5, 6]
			}
		},
		computed: {
			imageclass: function() {
				return "big" == this.type ? "big-image" : "landscape" == this.type ? "landscape-image" : "bg" == this
					.type ? "bg-image" : "normal-image";
			}
		},
		methods: {
			toDetail: function(t, n) {
				console.log(t), uni.setStorageSync("tempDetailImage", t), uni.setStorageSync("tempDetailImageList",
						this.imageList),
					uni.navigateTo({
						url: "/pages/wallpaperList/wallpaperDetail?current=" + n
					});
			}
		}
	}
</script>

<style lang="scss">
	.image-one {
		border-radius: 6rpx;
		display: inline-block;
		margin-left: 20rpx;
		padding: 15rpx 0rpx;
	}

	.image-one image {
		border-radius: 15rpx;
		box-shadow: 0 2rpx 16rpx 0 rgba(0, 0, 0, .3);
		height: 100%;
		width: 100%;
	}

	.normal-image {
		height: 500rpx;
		width: 269rpx;
	}

	.big-image {
		height: 600rpx;
		width: 337rpx;
	}

	.ch-wallpaper-scroll-item {
		background-image: linear-gradient(135deg, #fafbfc 11%, #f1f2f3);
		border-radius: 16rpx;
		display: inline-block;
		height: 448rpx;
		margin-right: 12rpx;
		position: relative;
		transition: all .5s ease-in-out;
		width: 252rpx;
	}

	.ch-wallpaper-scroll-item text {
		color: #666768;
		font-size: 30rpx;
		left: 0;
		position: absolute;
		right: 0;
		text-align: center;
		top: 52%;
	}

	.landscape-image {
		height: 358rpx;
		width: 600rpx;
	}

	.bg-image {
		height: 350rpx;
		width: 350rpx;
	}

	.image-one:first-of-type {
		margin-left: 30rpx;
	}

	.image-one:last-of-type {
		margin-right: 30rpx;
	}

	.image-list {
		white-space: nowrap;
	}
</style>